<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:form>
        <p:panel id="pnlReporteArticulos"
                 header="Reporte Articulo"
                 style="width:70%;margin: 5px auto">

            <h:panelGrid columns="2" cellpadding="2" style="width: 70%"> 
                <h:outputText value="CATEGORIA : " style="font-weight: bold"  />  
                <p:selectOneMenu id="cbxCategoriaReporte" value="#{BKArticulo.idCategoriaArticuloReporte}" style="width: 160px">  
                    <f:selectItem itemLabel="Seleccione" itemValue="0" />  
                    <f:selectItems value="#{BKArticulo.listaCategoriaArticulo}" var="listaCategorias"
                                   itemLabel="#{listaCategorias.nombre}" itemValue="#{listaCategorias.id}"/>  
                    <p:ajax update="cbxSubCategoriaReporte" listener="#{MBArticulo.buscarSubCategoriasReporte}" event="change"
                            process="@this" />
                </p:selectOneMenu>  

                <h:outputText value="SUB CATEGORIA : " style="font-weight: bold" />  
                <p:selectOneMenu id="cbxSubCategoriaReporte" value="#{BKArticulo.idSubCategoriaArticuloReporte}" style="width: 160px">  
                    <f:selectItem itemLabel="Seleccione" itemValue="0" />  
                    <f:selectItems  var="listaCategorias" value="#{BKArticulo.listaSubCategoriaArticuloReporte}"
                                   itemLabel="#{listaCategorias.nombre}" itemValue="#{listaCategorias.id}" /> 
                    <p:ajax process="@this" update="botonReporte,slctModelos,chkTodos" listener="#{MBArticulo.seleccionarSubCategoriaReporte}" />
                </p:selectOneMenu> 

            </h:panelGrid>

            <p:scrollPanel id="indicators" style="height: 300px;" mode="native">
                <p:selectBooleanCheckbox value="#{BKArticulo.marcarTodo}" disabled="#{BKArticulo.idSubCategoriaArticuloReporte eq 0}"
                                         id="chkTodos" style="margin: 5px 0 0 5px">
                    <p:ajax process="@this" listener="#{MBArticulo.marcarTodos}" update="slctModelos" />
                </p:selectBooleanCheckbox>
                <h:outputText value="TODO" /> 
                <p:selectManyCheckbox value="#{BKArticulo.listaModelosReporteElegidos}" disabled="#{BKArticulo.idSubCategoriaArticuloReporte eq 0}"
                                      id="slctModelos" layout="pageDirection">  
                    <f:selectItems value="#{BKArticulo.listaModelosReporte}" var="modelo" 
                                   itemLabel="#{modelo}" itemValue="#{modelo}" />  
                </p:selectManyCheckbox>  

            </p:scrollPanel>
            <br/>
            <p:commandButton action="#{MBArticulo.reporteModelos()}" ajax="false" value="Reporte Modelos" id="botonReporte"
                             disabled="#{BKArticulo.idSubCategoriaArticuloReporte eq 0}" /> 


        </p:panel>
    </h:form>
</html>